<template>
  <!-- <load v-if="this.$store.state.isLoad"></load> -->
  <div class="ranking">
    <div class="top">
      <button
        class="btn"
        :class="{ active: activeIndex === index }"
        :key="index"
        v-for="(item, index) in list"
        @click="jump(index, item.name, item.type)"
      >
        {{ item.list }}
      </button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import load from "../components/Load.vue";
export default {
  name: "RanKing",
  components: {
    load,
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          list: "日漫榜",
          name: "Riman",
          type: 3,
        },
        {
          list: "国漫榜",
          name: "Guoman",
          type: 4,
        },
        {
          list: "免费榜",
          name: "Gratis",
          type: 1,
        },
      ],
    };
  },
  created() {
    // console.log('this.$route ==> ', this.$route);
    this.list.find((v, i) => {
      // console.log("i ==> ", i);
      if (v.name === this.$route.name) {
        this.activeIndex = i;
        return true;
      }
    });
  },
  methods: {
    jump(index, name, type) {
      if (this.activeIndex === index) {
        return;
      }
      this.activeIndex = index;
      this.$router.push({
        name: name,
        params: {
          type: type,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-evenly;
  .btn {
    width: 72px;
    height: 28px;
    border-radius: 14px;
    margin-top: 10px;
    border: 0px;
    background-color: #f5f7f8;
    color: #6c727e;
    &.active {
      color: white;
      background-color: #fb7299;
    }
  }
}
</style>